Html

  • HyperText Markup Language
  • Not a programming language, So no logic operation
  • Platform: Codepen image.png

1.Elements in html

image.png

1.1 Tages in html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Crash Course For Beginners</title>
    </head>
    <body>
        <!--This is a comment-->>
        <h1>Heading one</h1>
        <h2>Heading two</h2>
        <h3>Heading three</h3>
        <h4>Heading four</h4>
        <h5>Heading five</h5>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, earum?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, harum? Ullam fugit repudiandae impedit placeat quod qui quis totam excepturi saepe at, pariatur fuga modi tenetur, aperiam inventore voluptatum! Sequi.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum voluptates fugit expedita quisquam optio, illum commodi praesentium quos sed repudiandae. Aspernatur cum quod iusto accusamus quidem nisi minus vitae quo ducimus neque et officia, cumque dignissimos numquam! Expedita cumque praesentium nobis consequatur quae molestias eveniet fugit labore aut tenetur numquam, deserunt impedit eligendi suscipit dolore ad sequi vero, quaerat quos. Illo mollitia explicabo omnis quaerat sunt qui architecto nisi at aperiam sed molestiae, quasi ullam ex error, nemo consequuntur possimus ipsum ducimus reiciendis. Praesentium quaerat, non quis dolores voluptatum minima nobis repellat saepe ex, ut beatae placeat repudiandae alias nemo.</p>
    </body>
</html>

<!----> is the comment symbol in HTML (shortcuts: ctrl + '/')

1.2 Inline and block level element

  • block element
    • Shown in a block
    • Create a new line automatically
    • occupy all space (padding,border,margin)
    • <div>,<h1>-<h6>,<p>
  • Inline element
    • within a block element
    • manually create line breaks
    • within a certain space
    • <a>,<img>,<em>,<strong>

1.3 Attributes in HTML

image.png

  • follwing a openning tage
  • href,src,target,etc
  • Example 
        <p><a href="https://google.com" target="_blank">Lorem </a>ipsum dolor sit amet consectetur adipisicing elit. Veritatis, earum?</p>

1.4 List in HTML

  • <ul></ul>
    • <li></li>
    • Similar to * in notebook
  • <ol></ol>
    • rank by numbr
  • Example
    image.png 
          <ul>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
          <li>List Item 4</li>
          <li>List Item 5</li>
      </ul>
      <ol>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
          <li>List Item 4</li>
          <li>List Item 5</li>
      </ol>

1.5 Table in HTML

  • all elements within <table>
  • <tr> for row, td for data, th for table head

  • Example
    image.png

          <table>
          <thead>
              <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Age Name</th>
                  <th>Email Name</th>
              </tr>
          </thead>

          <tbody>
              <tr>
                  <td>Leonard</td>
                  <td>Chan</td>
                  <td>99</td>
                  <td>abc@abc.com</td>
              </tr>
              <tr>
                  <td>Leonard2</td>
                  <td>Chan</td>
                  <td>79</td>
                  <td>abc@abc.com</td>
              </tr>
              <tr>
                  <td>Leonard3</td>
                  <td>Chan</td>
                  <td>59</td>
                  <td>abc@abc.com</td>
              </tr>
          </tbody>
      </table>

1.6 Forms in HTML

  • The form ask user to input information
  • action handles how to solve the input information at the server side
  • placeholder is the text shown within the input box
  • Submit button is also a input module
  • Example
    image.png 
          <form action="form.js" method="POST">
          <div>
              <label >First Name</label>
              <input type="text" name="firstname" placeholder="Enter First Name">
          </div>
          <div>
              <label >Last Name</label>
              <input type="text" name="lastname" placeholder="Enter Last Name">
          </div>
          <div>
              <label >Email</label>
              <input type="email" name="email" placeholder="Enter Email">
          </div>
          <input type="submit" name = 'submit' value = 'Submit'>
      </form>

1.7 Button and image in HTML

  • hr stands for horizontal line
  • br stands for line break
  • Example image.png 
          <hr>
      <button>This is a button</button>
      <br>
      <img style="width: 30vw;height: 70vh;" src="img/pic.jpg" alt="This is a image">

1.8 Quotation in HTML

  • <blockquote> image.png 
          <blockquote>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, rem minima! Molestias ipsa, nostrum tempore rem voluptate rerum doloremque expedita.</blockquote>
  • <abbr> image.png 
          <p> <abbr title="Massachusetts Institute of Technology">MIT</abbr> is a prestigious collage</p>
  • <cite> image.png 
          <p><cite>MIT is a prestigious collage</cite> by Yalin Yang</p>

2. More information about HTML

For a developer, please remember that you always need to rely on documentation. please refer more information from this website